import Vue from 'vue';
import Vuex from 'vuex';
import * as types from './mutation-types'

const moduleA = {
  state: {
    name: 'zhangsan'
  },
  mutations: {
    updateName(state, payload) {
      state.name = payload;
    }
  },
  getters: {
    fullName(state) {
      return state.name + '1111';
    },
    fullNameExt(state, getters) {
      return getters.fullName + '2222';
    },
    fullNamePlus(state, getters, rootState) {
      return getters.fullNameExt + rootState.counter;
    }
  },
  actions: {
    updateNameAsyn(context, payload) {
      console.log(context);
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          context.commit('updateName', payload.name);
          resolve(payload);
        }, 3000);
      });
    }
  }
};

const moduleB = {
  state: {

  },
  mutations: {

  },
  getters: {

  },
  actions: {

  }
};

// 1.注入插件
Vue.use(Vuex);

// 2.创建对象
const store = new Vuex.Store({
  state: {
    counter: 1000,
    students: [
      {id: 111, name: '林青霞', age: 18},
      {id: 112, name: '张曼玉', age: 19},
      {id: 113, name: '王祖贤', age: 22},
      {id: 114, name: '钟楚红', age: 24}
    ],
    info: {
      name: 'miranda',
      age: 18,
      height: 1.88
    }
  },
  // 通常情况下，Vuex要求mutations中的方法必须是同步方法，主要的原因是当我们使用devtools时，它可以帮助我们捕捉mutation的快照，如果是异步操作，devtools将不能很好的追踪这个操作什么时候会被完成
  mutations: {
    increment(state) {
      state.counter++;
    },
    decrement(state) {
      state.counter--;
    },
    incrementCount(state, count) {
      state.counter += count;
    },
    incrementCountSpecial(state, payload) {
      state.counter = payload.count;
    },
    addStudent(state, payload) {
      state.students.push(payload);
    },
    // mutation常量类型
    [types.UPDATE_INFO](state) {
      // Vuex的store中的state是响应式的，当state中的数据发生改变时，Vue组件会自动更新，前提是要遵守一些Vuex对应的规则
      // 1.提前在store中初始化好所需的属性
      // 2.当给state中的对象添加新属性时，使用两种方式[方式一：使用Vue.set(obj, newProp, value) 方式二：用新对象给旧对象重新赋值]


      // 非响应式
      // delete state.info.age;
      // state.info['address'] = "陕西西安";


      // 响应式
      // state.info.name = "zhangsan";
      // Vue.delete(state.info, 'age');
      // Vue.set(state.info, 'address', '陕西西安');
      // ES6中对象的扩展运算符(...)，用于取出对象中所有可遍历的属性，然后拷贝到当前对象之中
      state.info = {...state.info, address: '陕西西安'};
    }
  },
  // actions类似于mutations，它用来代替mutations进行异步操作的
  actions: {
    addStudentAsyn(context, payload) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          context.commit('addStudent', payload);
          resolve(payload);
        }, 3000);
      });
    }
  },
  getters: {
    more20Stu(state) {
      return state.students.filter(s => s.age > 20);
    },
    more20StuLenth(state, getters) {
      return getters.more20Stu.length;
    },
    // getters默认是不能传递参数的，如果希望传递参数，那么只能让getters本身返回另一个函数
    moreAgeStu(state) {
      return age => {
        return state.students.filter(s => s.age > age);
      }
    }
  },
  modules: {
    a: moduleA,
    b: moduleB
  }
});

// 3.导出
export default store;
